<template>
	<div id="bigScreenBodyDiv" class="bodyDiv" :style="BodyBackground">
		<div class="header">
			<div style="width:2%;height:100%;font-size:1rem;padding-top: 1.375rem;color: #55aaff;">
				<ScreenFull @listenToScreenFull="changeScreenFull"></ScreenFull>
			</div>
			
			<div style="width:1%;height:50%;padding-left: 0.5rem;margin-top: 20px;">
				<!--
				<el-badge :value="tipsCount" class="item">
					<img :src="messageTipOpenUrl" style="padding-top: 0rem;color: #55aaff;width: 95%;height: 68%;" @click="closeMessageTip()" @dblclick="openTipsList" v-if="messageTipOpened">
					<img :src="messageTipCloseUrl" style="padding-top: 0rem;color: #306090;width: 95%;height: 68%;" @click="openMessageTip()" @dblclick="openTipsList" v-if="!messageTipOpened">
				</el-badge>
				<div id="J_prismPlayer" class="prism-player" v-if="messageTipOpened"></div>
				-->
			</div>
			
			<div style="width:94%;height:100%;">
				<div :style="TitleBackground" style="width:100%;height:100%;background-size: 100% 100%;display:flex;">
					<div style="width:33%;height:100%;display:flex;">
						<div id="dateanweekDiv" style="width:100%;height:100%;text-align:center;color:#ffffff;font-size:1rem;padding-top:1.375rem;">
							{{dateanweekData}}
						</div>
					</div>
					<div style="width:34%;height:100%;text-align:center;color:#ffffff;">
					<p style="font-size:1.375rem;margin:1.125rem auto;">OBD监管系统</p>
					</div>
					<div style="width:33%;height:100%;text-align:center;display:flex;z-index:1;display: flex;">
						<div id="" style="width: 30%;height: 100%;">
							<div id="temperatureDiv" style="width:100%;height:100%;text-align:right;color:#ffffff;font-size:1rem;padding-top:1.375rem;">
								{{areaData}}
							</div>
						</div>
						
						<div id="" style="width: 40%;height: 100%;" @mouseenter="changeShowTQCJ('block')" @mouseleave="changeShowTQCJ('none')">
							<div id="" style="width: 100%;height: 100%;display: flex;">
								<div id="" style="width: 33%;height: 100%;">
									<div id="temperatureDiv" style="width:100%;height:100%;text-align:right;color:#ffffff;font-size:1.25rem;padding-top:1.375rem;" >
										{{temperatureData1}}
									</div>
								</div>
								<div id="" style="width: 67%;height: 100%;display: flex;">
									<div id="tempImageDiv" style="width: 35%;height: 100%;">
										<img :src="tempImageUrl" style="padding-top: 1rem;">
									</div>
									<div id="" style="width: 65%;height: 100%;display: flex;flex-direction: column;text-align: left;">
										<div id="tempDescDiv" class="" style="width: 100%;height: 50%;color:#ffffff;font-size:0.5rem;padding-top: 1.125rem;">
											{{tempDesc}}
										</div>
										<div id="windDescDiv" class="" style="width: 100%;height: 50%;color:#ffffff;font-size:0.5rem;padding-top: 0.125rem;">
											{{windDesc}}
										</div>
									</div>
								</div>
							</div>
							<div id="TQplugin" style="display: none;">
								<div id="he-plugin-standard" ></div>
							</div>
						</div>
						<div id="" style="width: 15%;height: 100%;text-align: right;">
							<el-dropdown @command="menuSelect">
								<span class="el-dropdown-link">
									<el-image
									style="width: 2rem; height: 2rem;margin-top: 0.9375rem;"
									:src="menuIconUrl"
									fit="fit"></el-image>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="DeviceInfo">设备信息</el-dropdown-item>
									<el-dropdown-item command="CarInfo" divided>车辆信息</el-dropdown-item>
									<el-dropdown-item command="ElectronicFence" divided>电子围栏</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
						<div id="" style="width: 15%;height: 100%;">
							
						</div>
					</div>
				</div>
			</div>
			<div style="width:3%;height:100%;">
				<el-dropdown @command="handleCommand">
					<span class="el-dropdown-link">
						<el-image 
						style="width: 2.5rem; height: 2.5rem;margin-top: 0.625rem;"
						:src="userIconUrl"
						fit="fit"></el-image>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="loginout">退出系统</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
		<div class="main" >
			<router-view ref="main" v-if="subRouterAlive" @updateBadge="updateBadge"></router-view>
		</div>
	</div>
	
</template>

<script>
import ScreenFull from '@/components/Screenfull/index.vue';
import titleImage from '@/assets/image/title1.png';
import * as echarts from 'echarts';
import moment from "moment";
import { getEarlyTipsListData } from '@/api/HBBigData/earlyTips/mainInterface.js';
export default {
	components:{
	    ScreenFull
	},
	provide() {
		return {
			subRouterreload: this.subRouterreload
		}
	},
    data() {
        return {
			showTQCJ: false,
			subRouterAlive: true,
            isScreenFull: false,
			TitleBackground: {
				backgroundImage:'url(' + require('@/assets/image/title1.png') + ')'
			},
			BodyBackground: {
				backgroundImage:'url(' + require('@/assets/image/background34-3.jpg') + ')',
				//backgroundImage:'url(' + require('@/assets/image/background15-1.jpg') + ')',
			},
			dateanweekData: "",
			areaData: "河北-保定市",
			temperatureData1: "",
			tempImageUrl: require('@/assets/icons/temperature/qing-32.png'),
			tempDesc: "",
			windDesc: "",
			messageTipOpenUrl: require('@/assets/icons/xianglingopen2.png'),
			messageTipCloseUrl: require('@/assets/icons/xianglingclose2.png'),
			messageTipOpened: true,
			tipsCount: 0,
			videoDialogWin: {
				videoPlayer: null,
				videoSource: require("D://test.mp3")
			},
			userIconUrl: require('@/assets/icons/usericon40.png'),
			menuIconUrl: require('@/assets/icons/TDCR/menu2-32.png'),
        }
    },
    computed: {
		
    },
	created() {
		this.toIndex();
		this.setdateweek();
		window.setInterval(() => {
			setTimeout(this.setdateweek(),0)
		},1000);
		window.setInterval(() => {
			setTimeout(this.setTemperatureData(),0)
		},3600000);
		
		this.setTemperature();
		//this.getTipsCount();
	},
    methods:{
		subRouterreload () {
			this.subRouterAlive = false;
			this.$nextTick(function(){
				this.subRouterAlive = true;
			})
		},
		changeScreenFull(flag){
			//this.reload();
			this.$refs['mainDiv'].subRouterreload();
			//this.subRouterreload();
			//this.solidClick();
		},
        // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个
        toIndex() {
			//alert(this.$route.path.split('/')[1]);
			if (this.$route.path.split('/')[1] == "")
			{
				this.$router.push('/mian');
			}
			else
			{
				return this.$route.path.split('/')[1];
			}
            
        },
		menuSelect(command) {
		    this.$refs['main'].handleChangeMainIndex(command);
		},
        // 用户名下拉菜单选择事件
        handleCommand(command) {
            if (command == 'loginout') {
				this.$confirm('此操作将注销用户并退出系统, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$store.dispatch("FedLogOut").then(() => {
						this.$message({
							type: 'success',
							message: '退出成功!'
						});
					    this.$router.push('/login');
					})
					.catch(() => {
						
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出操作！'
					});          
				});
            }
			else
			{
				this.$refs['main'].handleChangeMainIndex(command);
			}
        },
		setdateweek() {
			var dateObj = new Date();
		    var Y = dateObj.getFullYear();
		    var M = dateObj.getMonth();
		    var D = dateObj.getDate();
		    var h = dateObj.getHours();
		    var m = dateObj.getMinutes();
		    var s = dateObj.getSeconds();
		    
		    M = (M+1 < 10 ? '0'+(M+1) : M+1);
		    D = (D < 10 ? '0'+D : D);
		    h = (h < 10 ? '0'+h : h);
		    m = (m < 10 ? '0'+m : m);
		    s = (s < 10 ? '0'+s : s);
		    
		    var date = Y + "年" + M + "月" + D + "日 " + h + ":" + m + ":" + s;
			var week = dateObj.toLocaleDateString([], {weekday: 'long'})
			//alert(date + " " + week);
			this.dateanweekData = date + " " + week;
			//document.getElementById("dateanweekDiv").innerHTML = date + " " + week;
			//document.getElementById("dateanweekDiv").innerHTML = '123435235';
		},
		changeShowTQCJ(type) {
			document.getElementById('TQplugin').style.display = type;
			//this.showTQCJ = type;
			//alert(this.showTQCJ);
		},
		setTemperature() {
			window.WIDGET = {
			  "CONFIG": {
			    "layout": "2",
				"width": 230,
				"height": 270,
				"background": "1",
				"dataColor": "FFFFFF",
				"borderRadius": "5",
				"city": "CN101090201",
				"key": "099ad00159094328803b1ab03aad9d2f"
			  }
			}
			var script = document.createElement('script');
			script.type = 'text/javascript';
			script.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0';
			document.getElementsByTagName('head')[0].appendChild(script);
			
			this.setTemperatureData();
		},
		setTemperatureData() {
			var url = 'https://devapi.qweather.com/v7/weather/now?location=115.46418,38.873891&key=6582b172325549b19e90ef9dedf4b48b';
			this.$http.get(url).then(response => {
				if (response.body.code == 200)
				{
					var nowData = response.body.now;
					var temperature = nowData.temp;
					var info = nowData.text;
					var direct = nowData.windDir;
					var power = nowData.windScale + "级";
					this.areaData = "河北-保定市";
					this.temperatureData1 = temperature + "°C";
					this.tempDesc = info;
					if (info.indexOf("晴") != -1)
					{
						this.tempImageUrl = require("@/assets/icons/temperature/qing-32.png");
					}
					else if (info.indexOf("多云") != -1) {
						this.tempImageUrl = require("@/assets/icons/temperature/duoyun-32.png");
					}
					else if (info.indexOf("阴") != -1) {
						this.tempImageUrl = require("@/assets/icons/temperature/yintian-32.png");
					}
					else if (info.indexOf("大雨") != -1) {
						this.tempImageUrl = require("@/assets/icons/temperature/dayu-32.png");
					}
					this.windDesc = direct + power;
				}
			   
			}).catch(error => {
				
			});
		},
		openMessageTip() {
			this.messageTipOpened = true;
		},
		closeMessageTip() {
			this.messageTipOpened = false;
		},
		openTipsList() {
			this.$refs['main'].handleChangeMainIndex("earlyTips");
		},
		updateBadge(validCount) {
			//this.tipsCount = validCount;
			this.getTipsCount();
		},
		getTipsCount() {
			var queryParams = {
				offset: 0,
				limit: 10000,
				modId: '',
				isBack: '',
				isAction: 0,
				beginTime: moment(new Date()-1000*3600*24*30).format("yyyy-MM-DD HH:mm:ss"),
				endTime: moment(new Date()).format("yyyy-MM-DD HH:mm:ss"),
			};
			getEarlyTipsListData(queryParams).then(res => {
				this.tipsCount = res.total;
			}).catch(error => {
			
			});
		},
		solidClick() {
			//this.voicePrompt('开始播报语音提示');
			if (this.messageTipOpened == true) {
				var self = this;
				this.initVideoPlayer(self);
			}
			else{
				alert("执行右下角弹窗提示！");
			}
			
		},
		initVideoPlayer(_self) {
			_self.videoDialogWin.videoPlayer = new Aliplayer({
				id: "J_prismPlayer", // 容器id
				source: _self.videoDialogWin.videoSource,//视频地址
				// cover: "http://cdn.img.mtedu.com/images/assignment/day_3.jpg",  //播放器封面图
				autoplay: true,      // 是否自动播放
				width: "100%",       // 播放器宽度
				height: "200px",      // 播放器高度
				playsinline: true,
			})
		}
    }
}
</script>


<style scoped>
	.bodyDiv {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: no-repeat center top;
		background-size:cover;
	}
	.header {
		width: 100%;
		height:60px;
		display:flex;
		z-index:1;
		color: #333;
		text-align: center;
	}
	.main {
		flex: 1;
		width: 100%;
		display: flex;
	}
</style>